<template>
  <div style="margin-top: 10px; margin-bottom: 80px">
    <router-link :to="{name:'tickmsg',params:{blogId:tickid}}"> <el-button  icon="el-icon-back"></el-button></router-link>
     
    {{tkmsg.title}}的评论区

    <el-card>
      <div style="padding: 20px; color: #888">
        <div>
          <el-input type="textarea" v-model="entity.content">发表评论</el-input>
          <div>
            <el-radio v-model="entity.status" label="1">讨论</el-radio>
            <el-radio v-model="entity.status" label="2">扩列</el-radio>
            <el-radio v-model="entity.status" label="3">返图</el-radio>
            <el-radio v-model="entity.status" label="4">约妆</el-radio>
          </div>
          <el-upload
            action="http://127.0.0.1:8081/DL/upload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :on-success="handleAvatarSuccess"
            limit="6"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible2">
            <img width="100%" :src="bigImg" alt="" />
          </el-dialog>

          <div style="text-align: right; padding: 10px">
            <el-button type="primary" @click="save()">发表</el-button>
          </div>
        </div>
      </div>
      <div>
        内容筛选
        <br>
        <el-radio v-model="status" label="1" border @change="cstatus()" >全部</el-radio>
        <el-radio v-model="status" label="2" border @change="cstatus()">扩列</el-radio>
        <el-radio v-model="status" label="3" border @change="cstatus()">返图</el-radio>
        <el-radio v-model="status" label="4" border @change="cstatus()">约妆</el-radio>
      </div>
      <div
        style="display: flex; padding: 20px"
        v-for="(replys, key) in reply"
        :key="key"
      >
        <div style="text-align: center; flex: 0.2">
          <el-image v-bind:src="replys.sav"></el-image>
        </div>
        <div style="padding: 0 10px; flex: 5">
          <div>
            <b style="font-size: 14px">{{ replys.sname }} </b>
          </div>
          <div style="padding: 10px 0; color: #888">
            {{ replys.message }}
            <div class="demo-image__preview">
              <el-image
                v-if="replys.picture"
                style="width: 100px; height: 100px"
                :src="replys.picture"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
              <el-image
                v-if="replys.picture1"
                style="width: 100px; height: 100px"
                :src="replys.picture1"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
              <el-image
                v-if="replys.picture2"
                style="width: 100px; height: 100px"
                :src="replys.picture2"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
              <el-image
                v-if="replys.picture3"
                style="width: 100px; height: 100px"
                :src="replys.picture3"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
              <el-image
                v-if="replys.picture4"
                style="width: 100px; height: 100px"
                :src="replys.picture4"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
              <el-image
                v-if="replys.picture5"
                style="width: 100px; height: 100px"
                :src="replys.picture5"
                :preview-src-list="[
                  replys.picture,
                  replys.picture1,
                  replys.picture2,
                  replys.picture3,
                  replys.picture4,
                  replys.picture5,
                ]"
              >
              </el-image>
            </div>

            <el-button
              type="text"
              size="mini"
              @click="del(replys.id)"
              v-if="replys.userId === thisuserid"
              >删除:{{ replys.userId }}
            </el-button>
          </div>
          <div
            style="background-color: #eee; padding: 10px"
            v-for="(son, key) in reply[key].subrepVo"
            :key="key"
          >
            <el-image
              style="width: 20px; height: 20px"
              v-bind:src="son.sav"
            ></el-image>
            {{ son.sname }}  <tex v-if="son.reUserid">回复@ {{ son.fname }}</tex>  : {{ son.message }}
            <el-button
              type="text"
              style="margin-left: 20px"
              @click="reReply(replys.id, son.userId)"
              >回复</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="del(son.id)"
              v-if="son.userId === thisuserid"
              >删除
            </el-button>
          </div>

          <div style="color: #888; font-size: 12px">
            <span> {{ replys.created }} </span>
            <el-button
              type="text"
              style="margin-left: 20px"
              @click="reReply(replys.id, replys.reUserid)"
              >回复</el-button
            >
          </div>
        </div>
      </div>

      <el-dialog
        title="回复"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <div style="padding: 20px; color: #888">
          <div>
            回复ID:{{ replyid }}回复用户id:{{ replytoson.reUserid }}
            <el-input type="textarea" v-model="replytoson.message"
              >回复评论</el-input
            >
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="replyson(replyid)">确 定</el-button>
        </span>
      </el-dialog>


    </el-card>
    
    已经到低啦！
    
  
  
  </div>
</template>

<script>
export default {
  data() {
    return {
      status: "1",
      dialogVisible: false,
      dialogVisible2: false, //相册开关
      tickid: 0,
      thisuserid: "",
      reply: [],
      replytoson: {},
      tkmsg:{},
      entity: {},
      dialogImageUrl: [],
      bigImg: "",
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg",
      ],
      replyid: 0,
      picture: "",
      picture1: "",
      picture2: "",
      picture3: "",
      picture4: "",
      picture5: "",
      picture5: "",
    };
  },
  created() {
    const _this = this;
    const tickid = this.$route.params.blogId;
    console.log("tickid:",this.$route.params.blogId)
    this.thisuserid = 0;
    try{
    if(_this.$store.getters.getUser.id!= null){
      this.thisuserid = _this.$store.getters.getUser.id;
    console.log("获取用户id:", _this.$store.getters.getUser.id); //判断是否删除
    console.log("this.$route.params.blogId", this.$route.params.blogId);
    }}catch(err){
      console.log("未登录")
    }
    _this.tickid = tickid;
    //this.entity.status=1;
    this.$axios
      .get("/reply/test?currentpage=1&tickid=" + parseInt(_this.tickid))
      .then((res5) => {
        const reply = res5.data.data;
        console.log("tickmsg****************************", reply);
        // console.log(tickmsg.tickNum)
        _this.reply = reply;
        // _this.blog.price=tickmsg.price
        console.log(_this.reply);
      });
     this.$axios.get("/ticks/"+tickid).then((resa)=>{
       console.log("test9测试",resa)
       _this.tkmsg=resa.data.data
       console.log("test9测试",_this.tkmsg)
     })
  },

  methods: {
    reReply(id, reUserid) {
      console.log("1231313:", id, "回复用户id:", reUserid);
      this.replyid = id;
      this.replytoson.reUserid = reUserid;
      this.dialogVisible = true;
      //this.entity.parentId = id;
    },
    del(id) {
      console.log("删除编号:", id);
      this.$axios
        .post(`/reply/delReply?id=` + id, this.entity, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          this.$alert("操作成功", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.go(0);
            },
          });
        });
    },
    replyson(id) {
      const _this = this;
      console.log("this reply id :", id);
      console.log("replytoson message", this.replytoson.message);
      this.replytoson.fatherId = id;
      this.replytoson.tickId = this.tickid;

      console.log("replytoson all:", this.replytoson);
      //this.entity=this.replytoson
      this.$axios
        .post(`/reply/fatherReply`, this.replytoson, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          _this.$alert("操作成功", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.go(0);
            },
          });
        });
      this.dialogVisible = false;
    },
    cstatus(){
      console.log("变化",this.status)
       const _this = this;
    const tickid = this.$route.params.blogId;
    try{ if(_this.$store.getters.getUser.id!= null){
      this.thisuserid = _this.$store.getters.getUser.id;
        console.log("获取用户id:", _this.$store.getters.getUser.id); //判断是否删除
    console.log("this.$route.params.blogId", this.$route.params.blogId);
    }}catch(err){
      console.log("未登录")
    }
   
    
  
    _this.tickid = tickid;
    //this.entity.status=1;
    this.$axios
      .get("/reply/test?currentpage=1&tickid=" + parseInt(_this.tickid)+"&status="+parseInt(_this.status))
      .then((res5) => {
        const reply = res5.data.data;
        console.log("tickmsg****************************", reply);
        // console.log(tickmsg.tickNum)
        _this.reply = reply;
        // _this.blog.price=tickmsg.price
        console.log(_this.reply);
      });
    },
    gotop(){
      this.$router.go(0);
    },
    handleRemove(file, fileList) {
      //需要手动设置删除
      console.log("file.response", file.response);
      console.log("file.response.url", file.response.url); //删除的文件路劲
      console.log("fileList", fileList);
      console.log(file, fileList);
      console.log("****************");
      //console.log(fileList[0].response.url)测试完成无用
      var test = [];
      for (var i = 0; i < fileList.length; i++) {
        test.push(fileList[i].response.url);
      }
      console.log(test);
      this.dialogImageUrl = test;
      const _this = this;
      _this.$axios.post("/DL/delete?url=" + file.response.url).then((res) => {
        console.log("res删除成功:", res);
      });
    },
    handlePictureCardPreview(file) {
      console.log(file.url);
      this.bigImg = file.url;
      console.log(this.dialogImageUrl);
      this.dialogVisible2 = true;
    },
    save() {
      const _this = this; //保存的字段需要与spring的实体类一致
      console.log("+++++++++++++++++++");
      console.log("dialogImageUrl", this.dialogImageUrl);
      console.log("tickid:", this.tickid);
      this.picture = this.dialogImageUrl[0];
      console.log("picture", this.picture);
      this.picture1 = this.dialogImageUrl[1];

      this.picture2 = this.dialogImageUrl[2];
      this.picture3 = this.dialogImageUrl[3];
      this.picture4 = this.dialogImageUrl[4];
      this.picture5 = this.dialogImageUrl[5];
      console.log(
        this.picture1,
        this.picture2,
        this.picture3,
        this.picture4,
        this.picture5
      );
      this.entity.picture = this.picture;
      this.entity.picture1 = this.picture1;
      this.entity.picture2 = this.picture2;
      this.entity.picture3 = this.picture3;
      this.entity.picture4 = this.picture4;
      this.entity.picture5 = this.picture5;
      this.entity.tickid = this.tickid;
      this.entity.tickId = this.tickid;
      this.entity.message = this.entity.content;
      console.log("entity", this.entity);

      this.$axios
        .post(`/reply/fatherReply`, this.entity, {
          headers: {
            Authorization: localStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          _this.$alert("操作成功", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              this.$router.go(0);
            },
          });
        });
    },
    handleClose() {
      console.log("handclose");
    },
    handleAvatarSuccess(res, file) {
      //this.imageUrl = URL.createObjectURL(file.raw);
      this.dialogImageUrl.push(file.response.url);
      console.log(res);
      console.log(file);
    },
  },
};
</script>

<style>
</style>